<template>
    <div class="setting">
        <el-icon 
            size="16px"
            @click="showDrawer = true"
        ><Setting />
        </el-icon>

        <!--S设置弹窗-->
        <el-drawer
            v-model="showDrawer"
            title="系统设置"
        >
            <el-form 
                ref="RefForm"
                :model="form_data" 
                :rules="rules"
                label-width="120px"
                label-position="top"
            >
                <el-form-item label="微信开发工具路径" prop="weixin_tool_path">
                    <el-input v-model="form_data.weixin_tool_path" placeholder="微信开发工具路径" />
                </el-form-item>
            </el-form>

            <!--S提交-->
            <div class="setting__submit" @click="setSetting(RefForm)">确认设置</div>
            <!--E提交-->
        </el-drawer>
        <!--E设置弹窗-->

    </div>

    

</template>

<script lang="ts" setup>
import {onMounted,ref,reactive} from 'vue'
import { post, get } from '@/util/url.js'
import { ElMessage } from 'element-plus'

// 是否显示抽屉弹窗
let showDrawer = ref(false)

const RefForm = ref()

// 表单校验数据
const rules = reactive({
    weixin_tool_path: [
        {
            required: true, message: "请设置微信开发工具路径",trigger: "blur"
        }
    ]
})
// 表单数据
let form_data = reactive({
    // 微信开发工具路径
    weixin_tool_path: ''
})

onMounted(() => {
    getSetting()
})

/**
 * 获取系统配置
 */
const getSetting  = async () => {
    const setting = await get("setting/get")
    form_data = reactive(setting)
}

/**
 * 提交
 */
const setSetting = async (RefForm) => {
    await RefForm.validate((valid) => {
    if (valid) {
      post("setting/set",form_data)
        .then(() => {
            ElMessage({
                message: "设置成功",
                type: "success"
            })
            showDrawer.value = false
        })
        .catch((msg) => {
            ElMessage({
                message: msg,
                type: 'error'
            })
        })
    }
  })
}
</script>

<style lang="scss" scoped>
    .setting{
        position: relative;
        display:flex;
        justify-content:center;
        align-items:center;
        position:absolute;
        right:0;
        top:0;
        width:60px;
        height:40px;
        cursor:pointer;
        &__submit{
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 50px;
            line-height: 50px;
            font-size: 14px;
            background-color: var(--main-bg-color);
        }
    }
</style>